<template>
	<div>
		<el-dialog title="导出影像数据" class="download" v-model="visibleModal" width="50%" @close="close">
			<el-form v-model="form" label-width="auto">
				<el-card shadow="always" style="height: 65px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="导出格式：">
								<el-radio-group v-model="form.exportType">
									<el-radio value="DICOM" label="DICOM">DICOM</el-radio>
									<el-radio value="JPG" label="JPG">JPG</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<!--							<el-form-item style="padding-left: calc(50% - 30px)">-->
							<el-form-item>
								<!-- <el-button @click="handleSelectAll">全选</el-button> -->
								<el-button type="primary" @click="onSubmit">导出</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<br />
				<el-card shadow="always">
					<template #header>
						<div class="text-[#fff] p-c-0-5">选择要导出的序列</div>
					</template>
					<el-table v-loading="loading" ref="exportTable" :data="tableData" table-layout="auto" size="small" @selection-change="handleSelectionChange">
						<!-- <el-table-column width="50">
							<template v-slot="scope">
								<el-checkbox v-model="tableData[scope.$index].tick" @click="event=>event.stopPropagation()"></el-checkbox>
							</template>
						</el-table-column> -->
                        <el-table-column type="selection" width="55" />
                        <el-table-column align="center" prop="patName" label="姓名"> </el-table-column>
						<el-table-column align="center" prop="studyDesc" label="检查描述"> </el-table-column>
						<el-table-column align="center" prop="seriesId" label="序列ID"> </el-table-column>
						<el-table-column align="center" prop="seriesDesc" label="序列描述"></el-table-column>
						<el-table-column align="center" prop="instanceSum" label="图像数量"> </el-table-column>
						<el-table-column align="center" prop="ossIds" label="ossIds" v-if="false"> </el-table-column>
						<el-table-column align="center" prop="jpgOssIds" label="jpgOssIds" v-if="false"> </el-table-column>
					</el-table>
				</el-card>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { formatDateByStr } from "@/utils";


export default {
    name: 'ExportSeries',
    props: {
        study: null
    },
    data() {
        return {
            visibleModal: false,
            loading: false,
            tableData: [],
            currentRow: null,
            multipleSelection:[],
            form: {
                exportType: "DICOM",
            },
            checkedRow: {}
        }
    },
    created() {
        this.visibleModal = true;
        this.initTableData();
    },
    methods: {
        close() {
            this.$emit('close')
        },
        initTableData() {
            const patName = this.study.patName;
            const studyDesc = this.study.studyDesc;
            const risSeriesList = this.study.risSeriesList;
            this.tableData = [];
            for (const o of risSeriesList) {
                const row = { patName: patName, studyDesc: studyDesc, seriesId: o.id, seriesDesc: o.seriesDesc }
                if (o.risInstanceList) {
                    row['instanceSum'] = o.risInstanceList.length;
                    const jpgOssIds = o.risInstanceList.map(item => item.jpgOssId);
                    const ossIds = o.risInstanceList.map(item => item.ossId);
                    if (jpgOssIds && jpgOssIds.length > 0) {
                        row['jpgOssIds'] = jpgOssIds.join(",");
                    }
                    if (ossIds && ossIds.length > 0) {
                        row['ossIds'] = ossIds.join(",");
                    }
                }
                this.tableData.push(row)
            }
        },
        onSubmit() {
            console.log('导出',this.multipleSelection.value[0])
            const exportType = this.form.exportType;
             if (this.multipleSelection.value.length) {
                let ids = [];
                if (exportType == "DICOM") {
                    ids = this.multipleSelection.value.map(item => item.ossIds);
                } else {
                    ids = this.multipleSelection.value.map(item => item.jpgOssIds);
                }
                const url = '/resource/oss/batchDownload?exportType=' + exportType + '&ossIdStr=' + ids.join(",");
                this.$download.zip(url, this.study.patName + "-" + formatDateByStr(new Date(), "yyyyMMddHHmmss") + ".zip");
            } else {
                this.$modal.msgWarning('请选择要导出的序列')
            }

            // const exportType = this.form.exportType;
            // const ids = [];
            // const checkedRow = this.checkedRow;
            // const rows = Object.values(checkedRow);
            // if (rows && rows.length > 0) {
            //     let ids = [];
            //     if (exportType == "DICOM") {
            //         ids = rows.map(item => item.ossIds);
            //     } else {
            //         ids = rows.map(item => item.jpgOssIds);
            //     }
            //     const url = '/resource/oss/batchDownload?exportType=' + exportType + '&ossIdStr=' + ids.join(",");
            //     this.$download.zip(url, this.study.patName + "-" + formatDateByStr(new Date(), "yyyyMMddHHmmss") + ".zip");
            // } else {
            //     this.$modal.msgWarning('请选择要导出的序列')
            // }
        },
        handleRowClick(row, column, event) {
            if (!row.tick) {
                row.tick = true
                this.checkedRow[row.seriesId] = { ossIds: row.ossIds, jpgOssIds: row.jpgOssIds };
            } else {
                row.tick = false
                delete this.checkedRow[row.seriesId];
            }
        },
        handleSelectAll(row, column, event) {
            this.checkedRow = [];
            // 全选按钮点击事件处理函数
            const allChecked = this.tableData.every(item => item.tick);
            this.tableData.forEach(item => {
                item.tick = !allChecked;
                if (!allChecked) {
                    this.checkedRow[item.seriesId] = { ossIds: item.ossIds, jpgOssIds: item.jpgOssIds };
                }
            });
        },
        handleSelectionChange(val){
            this.multipleSelection.value = val
        }
    }
}
</script>

<style lang="scss">
.el-dialog.download {
    background-color: #4d4d4d;

    position: relative;
    border: solid 1px #666;
    height: 750px;

    .el-form-item__label{
        color:#fff;
    }

    .el-radio{
        color:#fff;
    }

    .el-card {
        background-color: #3d3d3d;

    }

    .el-dialog__body {
        padding: 0 10px;
    }

    .el-dialog__title {
        color: #fff !important;
        font-size: 15px;
    }

    .el-dialog__header {
        height: 60px;
        padding-bottom: 0;
    }

    .el-dialog__wrapper {
        display: table;
    }



    .el-input {

        .el-input__wrapper {
            background-color: #000;
        }

        .el-input-group__prepend {
            background-color: #000;
            color: #ccc;
        }

        input {
            background-color: #000;
            color: #ccc;
        }

    }

    .el-table {

        background-color: #3d3d3d;

        th {
            color: #000;
            font-weight:bold;
            background-color: #ccc !important;
        }

        tr {
            color: #000;
            background-color: #ccc;
            cursor: pointer;

            &:hover {
                color: #003399;
            }
        }
    }

}
</style>
